<template>
    <div class="custom-address-section">
        <van-area 
            ref="areaRef"
            v-model="selectedAreaCode"
            :area-list="areaList" 
            :columns-placeholder="['请选择', '请选择', '请选择']"
            cancel-button-text="清空"
            @confirm="confirm" 
            @cancel="cancel"
        />
        <div class="address-input-wrapper">
            <input
                type="text" 
                v-model="customAddress" 
                placeholder="请输入或生成打卡地址"
                class="address-input"
                @input="handleAddressChange"
            >
            <button class="location-btn">
                <van-icon name="location-o" size="20" />
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { Icon as VanIcon } from 'vant';
import province_list from '@/utils/area.js';
const areaList = province_list

const customAddress = ref('');
const areaRef = ref(null);
const selectedAreaCode = ref('');
const emits = defineEmits(['update:address']);

// 重置Area选择器
const resetAreaSelector = () => {
    // 直接清空选择的代码，这会触发组件重置
    selectedAreaCode.value = '';
};

const confirm = (args) => {
    const options = args['selectedOptions'];
    let address = '';
    
    options.forEach(element => {
        if (element && element['text'] && element['text'] !== '请选择') {
            if (address) {
                address += '';
            }
            address += element['text'];
        }
    });
    
    customAddress.value = address;
    // 只发送地址
    emits('update:address', address);
};

const cancel = () => {
    // 清空地址输入
    customAddress.value = '';
    // 重置选择器
    resetAreaSelector();
    // 只发送空地址
    emits('update:address', '');
};

const handleAddressChange = () => {
    // 只更新地址
    emits('update:address', customAddress.value);
};

// 添加清空所有信息的方法
const clearAll = () => {
    // 清空地址输入
    customAddress.value = '';
    // 重置选择器
    resetAreaSelector();
    // 只发送空地址
    emits('update:address', '');
};

// 暴露方法给父组件
defineExpose({
    customAddress,
    resetAreaSelector,
    clearAll // 暴露清空方法
});
</script>

<style scoped>
.custom-address-section {
    width: 100%;
}

.city-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.city-select {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    background-color: white;
}

.address-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.address-input {
    flex: 1;
    padding: 10px;
    border: none;
    font-size: 14px;
    outline: none;
}

.address-input:focus {
    border-color: #1E9FFF;
}

.location-btn {
    padding: 0 12px;
    height: 40px;
    background: none;
    border: none;
    color: #1E9FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
}

.location-btn:hover {
    background-color: #f5f5f5;
}
</style>
